import { useState, useTransition } from "react";

function About() {
  return (
    <div>
      <h4>About</h4>
    </div>
  );
}

function Posts() {
  const startTime = Date.now();
  while (Date.now() - startTime < 500) {}

  return (
    <div>
      <h4>Posts</h4>
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h4>Contact</h4>
    </div>
  );
}

function App() {
  const [isPending, startTransition] = useTransition();
  // 定义一个表示当前激活的 tab 选项卡
  const [tab, setTab] = useState("about");

  function selectedTab(nextTab) {
    // startTransition(() => {
    //   // 更新状态
    //   setTab(nextTab);
    // });
    // 更新状态
    setTab(nextTab);
  }

  return (
    <div>
      <h1>App</h1>
      <button
        className={tab === "about" ? "active" : ""}
        onClick={() => selectedTab("about")}
      >
        about
      </button>
      <button
        className={tab === "posts" ? "active" : ""}
        onClick={() => selectedTab("posts")}
      >
        posts
      </button>
      <button
        className={tab === "contact" ? "active" : ""}
        onClick={() => selectedTab("contact")}
      >
        contact
      </button>
      <hr />
      {/* 三个组件 */}
      {tab === "about" && <About />}
      {tab === "posts" && <Posts />}
      {tab === "contact" && <Contact />}
    </div>
  );
}

export default App;
